<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>pixi learn 5</title>
  <style>
    body {
      margin: 0;
      overflow: hidden;
    }
    canvas {
      display: block;
      background: blue;
    }
  </style>
</head>
<body>
<!--<canvas id="mycanvas"></canvas>-->
<script src="../lib/pixi.js"></script>
<script type="text/javascript">
  // This demo uses canvas2d gradient API
  // https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/createLinearGradient

  const app = new PIXI.Application({
    antialias: true,
    width: window.innerWidth,
    height: window.innerHeight,
  });
  document.body.appendChild(app.view);

  const letters = [];
  function addLetter(letter, parent, color, pos) {
    const bg = new PIXI.Sprite(PIXI.Texture.WHITE);
    bg.width = 500;
    bg.height = 400;
    bg.tint = color;

    const text = new PIXI.Text(letter, {fill: "#000"});
    text.anchor.set(0.5);
    text.position = {x: 350, y: 350};

    const container = new PIXI.Container();
    container.position = pos;
    container.visible = false;
    container.addChild(bg, text);
    parent.addChild(container);
    container.visible = true;
    letters.push(container);
    return container;
  }

  let a = addLetter('A', app.stage, 0xffffff, {x: 100, y: 100});

  function createGradTexture() {
    // adjust it if somehow you need better quality for very very big images
    const quality = 256;
    const canvas = document.createElement('canvas');
    canvas.width = quality;
    canvas.height = 1;

    const ctx = canvas.getContext('2d');

    // use canvas2d API to create gradient
    const grd = ctx.createLinearGradient(0, 0, quality, 0);
    grd.addColorStop(0, 'rgba(255, 255, 255, 0.0)');
    grd.addColorStop(0.3, 'rgba(0, 255, 255, 0.3)');
    grd.addColorStop(0.7, 'rgba(255, 0, 0, 0.7');
    grd.addColorStop(1, 'green');

    ctx.fillStyle = grd;
    ctx.fillRect(0, 0, quality, 1);

    return PIXI.Texture.from(canvas);
  }

  const gradTexture = createGradTexture();

  const sprite = new PIXI.Sprite(gradTexture);
  sprite.position.set(100, 100);
  sprite.rotation = Math.PI / 8;
  sprite.width = 500;
  sprite.height = 50;
  app.stage.addChild(sprite);

</script>
</body>
</html>
